<template>
     <el-table :data="tableData" stripe  border  style="width: 100%" ref="multipleTableRef">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="discountactivitiesid" label="ID" width="100" />
        <el-table-column prop="title" label="活动名称" width="120" />
        <el-table-column prop="startdate" label="起始时间" width="180" />
        <el-table-column prop="enddate" label="结束时间" width="180" />
        <el-table-column prop="discountrate" label="折扣率" width="180" />
        <el-table-column prop="state" label="活动状态" width="100" >
            <template #default="scope"> 
                <el-tag class="ml-2" type="warning" effect="dark" v-if="scope.row.state == 0">待开始</el-tag>
                <el-tag class="ml-2" type="success" effect="dark" v-if="scope.row.state == 1">进行中</el-tag>
                <el-tag class="ml-2" type="danger"  effect="dark" v-if="scope.row.state == 2">已结束</el-tag>
                </template>

        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
           <el-button link type="danger" size="small"  @click="handleDel(scope.$index)">删除</el-button>
           <el-button link type="primary" size="small" @click="handleUpdate(scope.$index)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
</template>

<script>
import {discountactivitiesList} from '../api/discountactivities'
import { toRefs,reactive,ref } from 'vue'
import { ElMessage } from 'element-plus'

    export default{
      setup(){
            const datax =  reactive( { tableData : []} )  //返回一个对象的响应式代理
            async  function loadData(){
                  const  repData = await discountactivitiesList();
                  datax.tableData = repData;
            }
            loadData();

            return{
                  ...toRefs(datax) 
            }
      }
    }
</script>